<template>
    <div>
        <div class="flex flex-col" v-if="ghInfo.length">
            <div
                v-for="item in ghInfo"
                :key="item.name + item.description"
                class="
                    flex flex-row
                    outline
                    justify-between
                    hover:bg-gray-100
                    transition
                    px-4
                    py-2
                    rounded-lg
                "
            >
                <div
                    class="flex flex-col w-4/5 cursor-pointer"
                    @click="showPackage(item)"
                >
                    <div class="title text-2xl">
                        {{ item.name }}
                    </div>

                    <div class="desc text-sm overflow-ellipsis truncate w-80">
                        {{ item.description }}
                    </div>
                </div>
                <div>
                    <div class="icon">
                        <a
                            class="Icon"
                            v-if="item.homepage"
                            :href="item.homepage"
                            target="_blank"
                        >
                            home
                        </a>
                    </div>
                    <div class="text-sm">
                        <span class="license" v-if="item.license">
                            <span class="Icon">balance</span>
                            {{ item.license.spdx_id || item.license.name }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <van-empty v-else image="error" description="没有项目哦" />
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    computed: {
        ...mapState({
            ghInfo: (state) => state.deliver.ghBox,
        }),
    },
    methods: {
        showPackage(item) {
            this.$emit("showPackage", item, "gh");
        },
    },
};
</script>

<style lang="less" scoped></style>
